<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="name1" />+
			<input type="text" v-model="name2" />+
			<input type="text" v-model="name3" />=
			<input type="text" v-model="nameS" />
			<p>{{nameS}}</p>
			<p>{{nameS}}</p>
			<p>{{nameS}}</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					name1:"",
					name2:"",
					name3:""
				},
				methods:{},				
				computed:{
					/*
					 * 1.调用不加()
					 * 2.数据发生变化立即计算
					 * 3.结果会缓存，多次调用不会重新计算结果
					 */
					'nameS':function(){
						console.log('ok')
						return this.name1 + this.name2 + this.name3
					}
				}
//				methods:{
//					getresult(){
//						this.nameresult=this.name+this.name1
//					}
//				}

//				watch:{
//						'name':function(newVal,oldVal){
//							this.nameresult=newVal+this.name1
//							
//	//						console.log(newVal+"----"+oldVal)
//						},
//						'name1':function(newVal){
//							this.nameresult=this.name+newVal
//						}
//				}
				/*1.computed属性的结果会被缓存，除非进行计算才会改变，主要当属性来使用
				 *2.methods方法表示一个具体的操作，主要写业务逻辑
				 *3.watch一个对象，键是需要观察的表达式，值是对应回调函数，
				 * 主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，
				 * 可以看作是computed和methods的结合体。
				 * 
				 * 
				 * 
				 * 
				 * */
			})
		</script>
	</body>
</html>
